<template>
    <div class="bottom_tab" :style="{height:data.hight+'px'}">
        <div :class="item.big?'tupian':''" v-for="(item,index) in data.list" :key="index" style="margin:auto" >
           
                <i v-if="item.is_thumb==0" :class="item.icon" :style="'color:'+(index==0?(item.check_color!=undefined&&item.check_color!=''?item.check_color:data.check_color):
                (item.title_color!=undefined&&item.title_color!=''?item.title_color:data.title_color))+';font-size:'+data.icon_size+'px'"></i>
                <div v-else :class="item.big?'datu_img':'xiaotu'" :style="'height:'+data.height+'px'">
                    <img :src="index==0?item.thumb_check:item.thumb" 
                :style="'width: '+(item.big?item.img_size:data.icon_size)+'px;height:'+(item.big?item.img_size:data.icon_size)+'px;border-radius: '+item.img_radius+'%;'"/>
                </div>
           
            <p :style="'margin-top:'+data.title_top+'px;color:'+(index==0?(item.check_color!=undefined&&item.check_color!=''?item.check_color:data.check_color):
            (item.title_color!=undefined&&item.title_color!=''?item.title_color:data.title_color))+';font-size:'+data.title_size+'px;'">{{item.title}}</p>
        </div>
    </div>
</template>

<script>
//@/image/model/juedu_28.png
 export default {
     props:['data'],
    name: 'ItemBottomtab',
    data(){
        return{
            data1:{
                tab_box_hight:'55',
                icons_maegin_top:'15',
                iconfont_tit:'5',
            }
        }
    }
}
</script>

<style >
.bottom_tab {
    display: flex;
    background-color: #fff;
    position: relative;
    z-index: 5;
    line-height: 1;
}

.bottom_tab div {
    flex: 1;
    text-align: center;
}
.bot_active p,.bot_active span{
color:#ff0000
}

.datu{
	position: relative;
	
}

.datu_img img{
	width: 50px;
	height: 50px;
    margin-top: -20px
}
.tupian{
	position: relative;
    
}
</style>
